Zadanie: Przywrócenie funkcjonalności klikania linków
W tym submodule wygenerowaliśmy listę linków w lewej kolumnie, w oparciu o posty naszego bloga. Jeśli jednak spróbujesz teraz kliknąć któryś z tytułów, to szybko stwierdzisz, że mamy buga! Klikanie linków nie wyświetla artykułów!
U mnie działa!
Jeśli u Ciebie wszystko działa poprawnie – nie wykonujesz poleceń dokładnie. ;)
W takim wypadku przeczytaj poniższy opis buga, aby zrozumieć jego działanie i znaleźć powód, dla którego u Ciebie ten problem nie wystąpił.
Diagnozowanie buga
Ten konkretny problem często pojawia się u młodych developerów. Aby go zdiagnozować, musimy znaleźć fragment kodu, napisany w poprzednim submodule.
const links = document.querySelectorAll('.titles a');Jest to definicja linków, którym chwilę później dodajemy listener nasłuchujący eventu click i wywołujący funkcję clickHandler.
Pod linią kodu, którą zacytowaliśmy powyżej, dodaj console.log, sprawdzający co zawiera stała links. W zależności od tego, jak dokładnie wykonujesz polecenia z tego submodułu, możesz zobaczyć w konsoli:
- pustą kolekcję elementów, czyli nie znaleziono żadnego linka,
- kolekcję linków.
W drugim przypadku rozwiń tę kolekcję i kliknij prawym przyciskiem myszy w któryś z linków. Spróbuj odnaleźć go w panelu za pomocą opcji Reveal in elements panel. Jak szybko zauważysz, nie da się znaleźć tego linka.
Te dwa przypadki różnią się tylko tym, czy w Twoim kodzie HTML zostały usunięte linki z listy w lewej kolumnie (pierwszy przypadek), czy też zostały w kodzie HTML (drugi przypadek).
W obu przypadkach wynika to z faktu, że ten skrypt (włącznie z nowo-dodanym console.log) wykonał się, zanim wygenerowaliśmy listę linków!
Popatrz na zawartość swojego pliku js/script.js – najpierw znajdujemy linki i dodajemy do nich event listenery, a dopiero potem czyścimy listę linków i generujemy nowe linki!
Rozwiązanie buga
Zamiana kolejności mogłaby pomóc, ale tylko na tym etapie prac. Jak wiesz, zamierzamy generować nową listę linków np. po kliknięciu tagu, więc ten problem by się powtórzył.
Dlatego kod odpowiedzialny za powiązanie kliknięcia w linki z funkcją titleClickHandler musimy przenieść na sam koniec funkcji generateTitleLinks. Mówimy tutaj o deklaracji stałej links oraz pętli for-of, w której dodajemy event listenery do tych linków. Nie musisz przenosić funkcji titleClickHandler.
Teraz klikanie w linki powinno działać tak jak wcześniej – ale klikamy już w linki wygenerowane za pomocą JS!
